<template>
  <div class="demo-inner-divider">image基本用法</div>
  <div class="basic">
    <div v-for="fit in fitList" :key="fit">
      <e-image @on-load="onLoad" :src="url" width="100px" height="100px" :fit="fit" :alt="fit">
      </e-image>
      <p>{{ fit }}</p>
    </div>
  </div>

  <div class="demo-inner-divider">image占位</div>
  <div class="basic-placeholder">
    <div>
      <e-image width="300px" height="300px" src="https://picsum.photos/id/64/300" />
      <p>默认</p>
    </div>

    <div>
      <e-image width="300px" height="300px" src="https://picsum.photos/id/64/300">
        <template #placeholder>
          <div>我是placeholder内容</div>
        </template>
      </e-image>
      <p>slot:placeholder</p>
    </div>
  </div>

  <div class="demo-inner-divider">图片加载失败</div>
  <div class="basic-error">
    <div>
      <e-image
        width="200px"
        height="100px"
        @on-error="onError"
        src="https://picsum_p.photos/id/1/200" />
      <p>默认</p>
    </div>
    <div>
      <e-image
        width="200px"
        src="https://picsum_p.photos/id/1/200"
        height="100px">
        <template #error>
          <e-icon type="image1" size="24" color="#ccc" />
        </template>
      </e-image>
      <p>slot:error</p>
    </div>
  </div>

  <div class="demo-inner-divider">图片懒加载</div>
  <div class="basic-lazy">
    <h2>纵向</h2>
    <div class="image-lazy-vertical">
      <template v-for="url in verticalUrlList" :key="url">
        <e-image :src="url" lazy />
      </template>
    </div>
    <h2>横线</h2>
    <div class="image-lazy">
      <div class="image-lazy-inner">
        <template v-for="url in horizontalUrlList" :key="url">
          <e-image :src="url" lazy />
        </template>
      </div>
    </div>
  </div>

  <div class="demo-inner-divider">图片预览</div>

  <div class="basic-preview">
    <template v-for="(url,index) in urlList" :key="index">
      <div>
        <e-image 
          transfer
          @on-load="onLoad1" 
          @on-error="onError1" 
          @on-click="onClick" 
          @on-switch="onSwitch" 
          @on-close="onClose" 
          :toolbar="['zoomIn', 'zoomOut', 'original', 'rotateLeft', 'rotateRight','download']" 
          :preview-tip="true" 
          :infinite="true" 
          :src="url" 
          fit="contain" 
          width="120px" 
          height="120px" 
          preview 
          :preview-list="urlList" 
          :initial-index="index">
          <template #preview>
            <div class="haloe-image-mark">
              <span>图片预览</span>
            </div>
          </template>
        </e-image>
      </div>
    </template>
  </div>

  <div class="demo-inner-divider">打开图片预览</div>
  <div class="basic-open-preview">
    <e-button @click="handleShowPreview">打开图片预览</e-button>
    <e-image-preview @on-close="onClosePreview" @on-switch="onSwitchPreview" transfer :mask-closable="false" :toolbar="['zoomIn', 'zoomOut', 'original', 'rotateLeft', 'rotateRight','download']" :initial-index="4" v-model="preview" :preview-list="urlList" />
  </div>

  <image-md class="markdown-body"></image-md>
</template>

<script>
import imageMd from "../../docs/image.md"
export default {
  data() {
    return {
      fitList: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://picsum.photos/id/64/400',
      verticalUrlList: [
        'https://picsum.photos/id/60/500/200',
        'https://picsum.photos/id/61/500/200',
        'https://picsum.photos/id/62/500/200',
        'https://picsum.photos/id/63/500/200',
        'https://picsum.photos/id/64/500/200',
        'https://picsum.photos/id/65/500/200',
        'https://picsum.photos/id/66/500/200',
        'https://picsum.photos/id/67/500/200',
        'https://picsum.photos/id/68/500/200',
        'https://picsum.photos/id/69/500/200',
      ],
      horizontalUrlList: [
        'https://picsum.photos/id/181/500/200',
        'https://picsum.photos/id/182/500/200',
        'https://picsum.photos/id/183/500/200',
        'https://picsum.photos/id/184/500/200',
        'https://picsum.photos/id/185/500/200',
        'https://picsum.photos/id/186/500/200',
        'https://picsum.photos/id/187/500/200',
        'https://picsum.photos/id/188/500/200',
        'https://picsum.photos/id/189/500/200',
        'https://picsum.photos/id/190/500/200',
      ],
      urlList:[
        'https://picsum.photos/id/71/800',
        'https://picsum.photos/id/72/800',
        'https://picsum.photos/id/73/800',
        'https://picsum.photos/id/74/800',
        'https://picsum.photos/id/75/800',
        'https://picsum.photos/id/76/800',
        'https://picsum.photos/id/77/800',
        'https://picsum.photos/id/78/800',
        'https://picsum.photos/id/79/800',
        'https://picsum.photos/id/80/800',
      ],
      preview: false,
    }
  },
  methods: {
    handleShowPreview () {
      this.preview = true;
    },
    onLoad(){
      console.log("加载成功")
    },
    onLoad1(){
      console.log("图片预览加载成功")
    },
    onError(){
      console.log("加载失败")
    },
    onError1(){
      console.log("图片预览加载失败")
    },
    onClick(index){
      console.log(index)
    },
    onSwitch(params){
      console.log("switch",params)
    },
    onClose(){
      console.log("close,图片预览关闭")
    },
    onSwitchPreview(index){
      console.log("on-switch，图片预览switch",index)
    },
    onClosePreview(){
      console.log("on-close，图片预览close")
    }
  },
  components:{
    imageMd
  }
}
</script>

<style scoped>
.basic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.basic-placeholder{
  display: flex;
  align-items: center;
  text-align: center;
}
.basic-placeholder div {
  margin: 10px;
}

.basic-error .haloe-image {
  background: #f8f8f9;
  line-height: 100px;
}
.basic-error {
  display: flex;
  align-items: center;
  /* justify-content:space-between; */
  text-align: center;
}
.basic-error div {
  margin: 20px;
}

.basic-preview{
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.image-lazy-vertical {
  height: 400px;
  width: 500px;
  overflow-y: auto;
}

.image-lazy-vertical .haloe-image {
  display: block;
  min-height: 200px;
}

.image-lazy {
  width: 400px;
  height: 200px;
  overflow: hidden;
  overflow-x: scroll;
}
.image-lazy-inner {
  width: 3000px;
  height: 200px;
}
.image-lazy .haloe-image {
  float: left;
  width: 300px;
  height: 200px;
}
</style>
